Create links

Images on the left side of the Scaal home page guide visitors to specific pages in the Scaal site. You'll add links from the Our Story, Products, and This Week images to their corresponding pages.

You'll see that there are a number of ways to create links using Dreamweaver. First, you'll add a link from the Our Story image to the Our Story page using the Property inspector.

1	In the Site window, double-click the icon for the DW3_scaal_home.html file in either panel.
	The DW3_scaal_home.html file opens.
2	In the Document window, click the Our Story image to select it.
	Don't double-click the image, or Dreamweaver will open the Select Image Source dialog box.
3	Choose Window > Properties to open the Property inspector if it isn't already open.
	The Image Property inspector displays information about the selected image.
	Note: The Link field contains a number sign (#), created when you attached the Swap Image behavior to the image. Don't remove the number sign; it will be replaced with the file name of the document you link to.
4	In the Property inspector, click the folder icon to the right of the Link field.
5	In the Select File dialog box, browse to my_ourstory.html, and click Select (Windows) or Choose (Macintosh) to select the file.
	The file name appears in the Link field of the Property inspector. Now you'll add a link to the Products image using the Property inspector and the Site window.
6	Click the title bar of the Site window to make it active, or choose Window > Site Files. Resize your Document window, if necessary, so that you can position the left side of the Document window and the Site window side by side.
7	In the Document window, click the Products image to select it.
8	In the Property inspector, drag the Point-to-File icon (located next to the Link field) to the Site window, and point to the file DW3_products_index.html.
	The file name appears in the Link field in the Property inspector for the products image.
	Click the Site Map icon in the Site window. The site map updates to reflect the link you added.
	A plus (+) sign next to any file in the site map indicates that the file contains links to other documents. Click the plus sign to expand the site map tree to display the associated files; click the minus (-) sign to collapse the site map view.
	Next, you'll change a link using the context menu.
9	In the Document window, right-click (Windows) or Control-click (Macintosh) the This Week image and choose Change Link.
	This image is linked to a behavior that swaps the image displayed when a users moves the pointer over the image. You'll change the link so that a file opens when a user clicks the image.
10	In the Select File dialog box, browse to DW3_thisweek.html and click Select (Windows) or Choose (Macintosh) to select the file to open.
	Notice that the Property inspector's Link field updates to show the linked file's name. Now you'll create a link from text.
11	In the Dreamweaver document, select the word products in the second paragraph.
12	Right-click (Windows) or Control-click (Macintosh) and choose Make Link from the context menu.
13	In the Select File dialog box, browse to DW3_products_index.html and click Select (Windows) or Choose (Macintosh) to select the file.
14	Choose File > Save to save all the changes you've made to the home page.
15	Choose File > Close to close the page.